<template>
  <header class="header">
    <h1>todos</h1>
    <input v-model="isAll" id="toggle-all" class="toggle-all" type="checkbox" />
    <label for="toggle-all"></label>
    <input
      v-model.trim="strTitle"
      @keyup.enter="doAdd"
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
    />
  </header>
</template>

<script>
export default {
  name: "TodoHeader",
  props: ["list"],
  data() {
    return {
      strTitle: "",
    };
  },
  methods: {
    // 1.新增方法---------------------------------
    doAdd() {
      // a.校验
      // b.生成新id
      const newId =
        this.list.length === 0 ? 1 : this.list[this.list.length - 1].id + 1;
      // c.封装数据对象
      const newObj = {
        id: newId,
        name: this.strTitle,
        isDone: false,
      };
      // d.加入数组
      this.list.push(newObj);
      // 清空 文本框
      this.strTitle = "";
    },
  },
  computed: {
    // 计算属性：全选框 控制
    isAll: {
      // 当 数组 元素 isDone 发生改变时执行
      get() {
        return this.list.every((e) => e.isDone);
      },
      // 当 全选框 改变时 执行：将所有小复选框都设置成一样的状态
      set(val) {
        this.list.forEach((e) => (e.isDone = val));
      },
    },
  },
};
</script>